<template>
	<view class="orderDetails">
		<view class="cardTemplate">
			<view class="header">
				<view class="img">
					<!-- <image src="../../static/images/img/yiwancheng.png" mode="widthFix"></image> -->
					<image src="../../static/images/img/jinhangzhong.png" mode="widthFix"></image>
				</view>
				<view>{{status}}</view>
				<view class="blessing" v-if="info.status==1">感谢您的支持，欢迎再次光临</view>
				<view class="pickUpNum" v-else>{{info.pickUpNum}}</view>
			</view>

			<view class="content">
<!-- 				<view class="info">
					<view class="left">
						<view class="name">福州店</view>
						<view class="address">福建省福州市连江县201号</view>
					</view>
					<view class="right">
						<u-icon name="phone" size="40rpx" margin-left="500rpx"></u-icon>
						<u-icon name="map" size="40rpx" margin-left="500rpx"></u-icon>
					</view>
				</view> -->

				<view class="commodityItem" v-for="item in info.menuItem" :key="item._id">
					<view class="left">
						{{item.title}}
					</view>
					<view class="right">
						<view class="num">×{{item.num}}</view>
						<view class="price">￥{{item.price}}</view>
					</view>
				</view>

<!-- 				<view class="coupon">
					<view class="left">
						<image src="../../static/images/icons/youhui.png" mode="widthFix"></image>
						<text>优惠卷</text>
					</view>
					<view class="right">
						<view></view>
						<view class="price">-￥5</view>
					</view>
				</view> -->

				<view class="total">
					合计 ￥{{info.price}}
				</view>
				<view class="total">
					桌号 {{info.tableNum}}
				</view>
			</view>

			<view class="footer">
				<view class="Tips">如需退款，请致电门店</view>
				<view class="time">下单时间:{{info.createTime}}</view>
				<view class="orderNum">
					<view class="num">订单号:{{info.orderId}}</view>
					<view class="copy" @tap="copy">复制</view>
				</view>
				<view class="remarks">备注:{{info.remarks}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetails
	} from '../../api/api'
	export default {
		data() {
			return {
				id: '',
				info: {}
			}
		},
		methods: {
			//复制订单号
			copy() {
				const orderId = this.info.orderId.toString()
				uni.setClipboardData({
					data: orderId,
					success(res) {
						uni.showToast({
							title: '已复制到剪贴板'
						})
					}
				})
			},
			//获取订单详情
			async getInfo() {
				const res = await getOrderDetails({
					id: this.id
				})
				this.info = res.data
				console.log(res)
			}
		},
		onLoad(options) {
			this.id = options._id
			this.getInfo()
		},
		onUnload() {
			getApp().globalData.clear = true
		},
		computed: {
			status() {
				if (this.info.status == 1) {
					return '已完成'
				} else {
					return '取餐号'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.orderDetails {
		padding: 40upx;

		.cardTemplate {
			.header {
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				box-shadow: 0 4px 5px #9c9da6;
				border-radius: 8upx;
				padding-top: 20upx;
				padding-bottom: 50upx;
				margin-bottom: 10upx;

				.img {
					width: 100%;
					height: 100upx;
					display: flex;
					justify-content: center;
					align-items: center;
					// margin-bottom: 5upx;

					image {
						width: 80upx;
					}
				}

				view {
					width: 100%;
					text-align: center;
				}

				.blessing {
					margin-top: 50upx;
					font-size: 10px;
					color: #9d9d9d;
				}

				.pickUpNum {
					font-size: 20px;
					color: black;
					font-weight: bold;
					margin-top: 20rpx;
				}
			}

			.content {
				background-color: #fff;
				padding: 0upx 40upx 50upx 40upx;

				.info,
				.commodityItem,
				.coupon {
					padding: 30upx 0;
					display: flex;
					border-bottom: 1px solid #cfcfcf;
					align-items: center;

					.left {
						flex: 3;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: wrap;

						.address {
							width: 100%;
							font-size: 10px;
							color: #999;
							margin-top: 5upx;
						}

						image {
							width: 60upx;
							height: 60upx;
							margin-right: 10upx;
						}
					}

					.right {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;
						overflow: hidden;
					}
				}

				.coupon {
					border-bottom: none;
				}

				.total {
					text-align: right;
					margin: 40upx 0;
				}
			}

			.footer {
				background-color: #fff;
				padding-bottom: 50upx;
				margin-top: -4upx;

				&.footer>view {
					font-size: 10px;
					padding: 0 40upx;
					margin: 4upx 0;
				}

				.orderNum {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
</style>
